<template>
  <view class="overall">
    <view class="content">
      <view class="newsItem" v-for="(item, index) in newsInfo" :key="index" @click="press(item)">
        <view class="">
          <!-- 拼接 BASE_API_URL 和 item.img 作为完整图片地址 -->
          <image :src="BASE_API_URL + item.img" mode=""></image> 
        </view>
        <view class="newsTitle">
          <view style="font-weight: bold;"> {{ item.title }}</view>
          <view>
            <view>阅读{{ item.num }}人</view>
            <view>{{ item.create_time }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { BASE_API_URL } from '@/utils/config'; // 导入配置
import { ref } from 'vue';
import { trends } from '@/api/index.js';

// 把 BASE_API_URL 暴露给模板使用，这样模板里才能直接用
defineExpose({
  BASE_API_URL
}); 

function handleClickLeft() {
  uni.navigateBack();
}

const newsInfo = ref([]);

trends({}).then(res => {
  console.log(res.data)
  newsInfo.value = res.data
})

function press(news) {
  uni.setStorage({
    key: 'news',
    data: news,
    success: function () {
      console.log('数据存储成功');
    }
  });

  uni.navigateTo({
    url: '/pages/journalism/journalism'
  })
}
</script>

<style scoped>
.overall {
  width: 100%;
  background-color: #FFFFFF;
  min-height: 100vh;
}

.title {
  width: 100%;
  height: 180rpx;
  background-color: #00DACA;
  color: white;
  display: flex;
  align-items: center;
}

.name {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 42rpx;
  margin-top: 50rpx;
  margin-left: 3%;
}

.name>view {
  margin-left: 20rpx;
}

.content {
  width: 100%;
  margin-top: 30rpx;
}

.newsItem {
  display: flex;
  min-height: 150rpx;
  width: 94%;
  margin: 0rpx 3%;
  padding: 20rpx 0;
  border-bottom: 2rpx #EEEEEE solid;
}

.newsItem>view:first-child {
  width: 150rpx;
  height: 150rpx;
  border: 1rpx #EEEEEE solid;
  border-radius: 20rpx;
  margin-right: 30rpx;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.newsItem image {
  width: 100%; 
  height: 60%; 
  object-fit: cover;
}

.newsTitle {
  min-width: 75%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.newsTitle>view {
  display: flex;
  justify-content: space-between;
}
</style>